<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>身份证识别</title>
	<script src="resources/js/jquery-3.7.1.min.js"></script>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 20px;
		}
		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #f9f9f9;
		}
		h1 {
			text-align: center;
			color: #333;
		}
		.upload-section {
			margin-bottom: 20px;
		}
		.upload-section label {
			display: block;
			margin-bottom: 10px;
			font-weight: bold;
		}
		.upload-section input[type="file"] {
			display: block;
			margin-bottom: 10px;
		}
		.preview {
			margin-top: 20px;
			text-align: center;
		}
		.preview img {
			max-width: 100%;
			border: 1px solid #ccc;
			border-radius: 5px;
		}
		.submit-btn {
			display: block;
			width: 100%;
			padding: 10px;
			background-color: orange;
			color: black;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
		}
		.submit-btn:hover {
			background-color:white;
		}
	</style>
</head>
<body>
<div class="container">
	<h1>实名认证</h1>
	<div class="upload-section">
		<label for="front">上传身份证正面：</label>
		<input type="file" id="front" accept="image/*">
	</div>
	<div class="preview">
		<img id="frontPreview" src="#" alt="身份证正面预览" style="display: none;">
	</div>
	<button class="submit-btn" onclick="submitForm()">提交</button>
	<div class="result" id="result"></div>
</div>

<script>
	// 监听身份证正面文件选择
	document.getElementById('front').addEventListener('change', function (event) {
		const file = event.target.files[0];
		if (file) {
			const reader = new FileReader();
			reader.onload = function (e) {
				document.getElementById('frontPreview').src = e.target.result;
				document.getElementById('frontPreview').style.display = 'block';
			};
			reader.readAsDataURL(file);
		}
	});

	// 提交表单
	function submitForm() {
		const frontFile = document.getElementById('front').files[0];

		if (!frontFile) {
			alert('请上传身份证正面图片！');
			return;
		}

		// 添加文件上传
		const formData = new FormData();
		formData.append('front', frontFile);
		console.log(formData,112121212)
		$.ajax({
			url: 'aliyun/id',
			type: 'post', // 更改为 POST
			data: formData,
			processData: false, // 告诉 jQuery 不要处理发送的数据
			contentType: false, // 告诉 jQuery 不要设置 Content-Type 请求头
			dataType: 'JSON',
			success: function(response) {
				console.log(response.data,123)
				if (response.code === 200) {
					alert('识别成功！');
					const people = response.data.data;
					const resultDiv = document.getElementById('result');
					resultDiv.innerHTML = `
                        <p>姓名: ${people.name}</p>
                        <p>性别: ${people.sex}</p>
                        <p>出生日期: ${people.day}</p>
                        <p>民族: ${people.ethnicity}</p>
                        <p>地址: ${people.address}</p>
                        <p>身份证号码: ${people.idNumber}</p>
                    `;
				} else {
					alert('识别失败');
				}
			},
			error: function() {
				alert('请求失败，请稍后重试');
			}
		});

	}
</script>
</body>
</html>